{% extends "base.html" %}

{% block content %}
<div class="control-panel">
    <h2>继电器控制面板</h2>
    
    <!-- 系统状态信息 -->
    <div class="system-status">
        <h3>系统状态</h3>
        <div class="status-grid">
            <div class="status-item">
                <span class="label">运行模式:</span>
                <span class="value {{ system_info.mode }}">
                    {{ '真实硬件' if system_info.mode == 'hardware' else '模拟模式' }}
                </span>
            </div>
            <div class="status-item">
                <span class="label">GPIO状态:</span>
                <span class="value {{ 'available' if system_info.gpio_available else 'unavailable' }}">
                    {{ '可用' if system_info.gpio_available else '不可用' }}
                </span>
            </div>
            <div class="status-item">
                <span class="label">启用继电器:</span>
                <span class="value">{{ system_info.enabled_relays | join(', ') }}</span>
            </div>
        </div>
    </div>
    
    <div class="relay-grid">
        {% for relay_name, state in relay_states.items() %}
        <div class="relay-card {{ 'enabled' if relay_name in system_info.enabled_relays else 'disabled' }}" 
             data-relay="{{ relay_name }}">
            <h3>{{ relay_name | upper }}</h3>
            <div class="relay-info">
                <!-- 简化显示，不直接访问配置 -->
                <span class="pin">引脚: 
                    {% if relay_name == 'relay_1' %}17
                    {% elif relay_name == 'relay_2' %}18
                    {% elif relay_name == 'relay_3' %}27
                    {% elif relay_name == 'relay_4' %}22
                    {% endif %}
                </span>
                <span class="status-badge {{ 'enabled' if relay_name in system_info.enabled_relays else 'disabled' }}">
                    {{ '已启用' if relay_name in system_info.enabled_relays else '未启用' }}
                </span>
            </div>
            <div class="status {{ 'on' if state else 'off' }}">
                {{ '开启' if state else '关闭' }}
            </div>
            <div class="controls">
                {% if relay_name in system_info.enabled_relays %}
                    <button class="btn btn-on" onclick="controlRelay('{{ relay_name }}', 'on')">开启</button>
                    <button class="btn btn-off" onclick="controlRelay('{{ relay_name }}', 'off')">关闭</button>
                    <button class="btn btn-toggle" onclick="controlRelay('{{ relay_name }}', 'toggle')">切换</button>
                {% else %}
                    <button class="btn btn-disabled" disabled>第二步禁用</button>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    
    <div class="system-actions">
        <button class="btn btn-all-on" onclick="controlAll('on')">全部开启</button>
        <button class="btn btn-all-off" onclick="controlAll('off')">全部关闭</button>
    </div>
    
    <div class="debug-info">
        <h3>第二步调试信息</h3>
        <p>当前步骤: 第二步 - 单继电器控制</p>
        <p>启用继电器: relay_1 (引脚 17)</p>
        <p>禁用继电器: relay_2 (引脚 18), relay_3 (引脚 27), relay_4 (引脚 22)</p>
        <p>模式: {{ '真实硬件' if system_info.mode == 'hardware' else '模拟模式' }}</p>
        <p>下一步: 添加多继电器控制</p>
    </div>
</div>
{% endblock %}